<template>
  <div class="test">
    <!-- test -->
    <!-- test测试页面，熟练使用vue -->
    <!-- <h2>{{msg}}</h2>
    <h3>条件渲染</h3>
    <div v-if="show">hello</div>
    <div v-else>world</div>
    <div @click="show=!show">事件：点击切换hello/world</div>
    <div @click="show=test">事件：点击切换hello/world</div>
    <h3>列表渲染</h3>
    <ol>
      <li v-for="(item,index) in arrs" :key="item" :id="'fruit'+index">{{item}}</li>
      
    </ol>
    <h3>表格</h3>
    <table>
      <tr v-for="v in arrs1" :key="v">
        <td>{{v.friut}}</td>
        <td>{{v.name}}</td>
        <td>{{v.money}}</td>
      </tr>
    </table>
    <h3>宫格</h3>
    <table>
      <tbody>
    <tr v-for="(n,index) in arrs2.length/2" :key="index">
    <td>{{arrs2[2*index].user}}</td>
    <td>{{arrs2[2*index].msg}}</td>
    <td>{{arrs2[2*index+1].user}}</td>
    <td>{{arrs2[2*index+1].msg}}</td>

    </tr>
    </tbody>
</table> -->
<el-tag type="danger">可以绘制矩形</el-tag>
<el-button @click="testEvent1">默认按钮</el-button>
  <el-button @click="testEvent2('hello',$event)" type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
  <el-table
    :data="arrs1"
    border
    stripe
    style="width: 100%">
    <el-table-column
      prop="friut"
      label="编号"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="种类"
      width="180">
    </el-table-column>
    <el-table-column
      prop="money"
      label="售价">
    </el-table-column>
  </el-table>
  </div>
</template>
<script type="text/javascript">
import axios from "@/utils/axios";
import $ from 'jquery';
export default {
  data() {
    return {
      // tableData: []
      msg: "hello 声明式渲染",
      show: false,
      arrs:["苹果","香蕉","草莓","猕猴桃"],
      arrs1:[
      {friut:"1",name:"apple",money:"3",},
      {friut:"2",name:"banana",money:"4"},
      {friut:"3",name:"orange",money:"5"}],
      arrs2:[
        {user:'A',msg:'1'},
        {user:'B',msg:'2'},
        {user:'C',msg:'3'},
        {user:'D',msg:'4'},
        {user:'E',msg:'5'},
        {user:'F',msg:'6'}
      ],
      
      


    };
  },
  // 钩子函数 生命周期。在组件创建好之后执行的函数
  created() {
    console.log('组件创建好了...');
    console.log($(".test"));
  },
  // 钩子函数，结点渲染完毕之后执行的函数
  mounted() {
    console.log('节点渲染好了...');
    console.log($(".test"));
  },
  methods: {
    testEvent1(event){
      console.log(event);
// 事件对象
    },
    testEvent2(str,event){
      console.log(str,event);

    },
    
    test: function() {
      this.show = !this.show;
      // this.test1();
    }
    // test(){},
    /**
     * {}
     */
  }
};
</script>
<style scope>
 
 .test{
   height: calc(100vh - 50px);
 }
</style>